<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Welcome to QuinceVIE!</title>
    <link href="bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />
    <link rel="stylesheet" href="style.css" />
</head>

<body>
    <nav class="navbar navbar-expand-lg bg-dark navbar-dark fixed-top">
        <div class="container">
            <a href="#" class="navbar-brand">小琪越语</a>

            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navmenu">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navmenu">
                <ul class="navbar-nav ms-auto">
                    <!--margin start = margin left-->
                    <li class="nav-item">
                        <div class="nav-link">最新课程</div>
                    </li>
                    <!-- <li class="nav-item">
                        <div class="nav-link"><a href="login.html">注册/登录</a> </div>
                    </li> -->
                    <li class="nav-item">
                        <div class="nav-link">关于我们</div>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <section class="p-5 bg-dark text-light text-center text-sm-start">
        <!--padding -->
        <div class="container">
            <div class="d-flex">
                <!--display flex-->
                <div>
                    <h1>
                        <span class="text-warning">小琪越语</span>
                    </h1>
                    <p class="my-4">
                        <!-- margin-top margin-bottom -->
                       来这里，轻松学会越语
                    </p>
                    <button class="btn btn-primary btn-lg">
                        观看我们的教程
                    </button>
                </div>
                <img src="./img/showcase.svg" alt="showcase" class="w-50 d-none d-md-block" />
            </div>
        </div>
    </section>

    <section class="p-5 bg-primary text-light">
        <div class="container">
            <div class="d-md-flex justify-content-between align-items-center">
                <h3 class="mb-3">现在注册账号开始使用</h3>
                <div class="input-group news-input">
                    <input type="text" class="form-control" placeholder="请输入你的邮箱" />
                    <button onclick="btnFunc('reg')" class="btn btn-dark btn-lg"> 注册</button>
                </div>
            </div>
        </div>
    </section>

    <section class="p-5">
        <div class="container">
            <div class="row g-4">
                <!--gap-->
                <div class="col-md">
                    <div class="card bg-dark text-light">
                        <div class="card-body text-center">
                            <div class="card-title">基础越语课程</div>
                            <div class="card-text">
                                基础越语课程
                            </div>
                            <a href="#" class="btn btn-primary mt-2">开始学习</a>
                        </div>
                    </div>
                </div>
                <div class="col-md">
                    <div class="card bg-secondary text-light">
                        <div class="card-body text-center">
                            <div class="card-title">实用口语</div>
                            <div class="card-text">
                                实用口语
                            </div>
                            <a href="#" class="btn btn-dark mt-2">立即学习</a>
                        </div>
                    </div>
                </div>
                <div class="col-md">
                    <div class="card bg-dark text-light">
                        <div class="card-body text-center">
                            <div class="card-title">越语学习资料</div>
                            <div class="card-text">
                                越语学习资料
                            </div>
                            <a target="_blank" class="btn btn-primary mt-2" href="https://qm.qq.com/cgi-bin/qm/qr?k=teL0Xbmnq4BLOEdsquk5Rqzm6gJeYD0v&jump_from=webapi&authKey=dXAe+tEBqEi/NyY+s5eCEPLZFjom7JYN1bzNAvqd3dJlUyUbmk4HBFYdEhF3mmTj"><img border="0" src="//pub.idqqimg.com/wpa/images/group.png" alt="学越南语📚" title="学越南语📚">加群获取</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="p-5">
        <div class="container">
            <div class="row align-items-center justify-content-between">
                <div class="col-md">
                    <img src="img/1.svg" alt="1" class="img-fluid" />
                </div>
                <div class="col-md p-5">
                    <h2>网站介绍</h2>
                    <p class="lead">
                        小琪越语
                    </p>
                    <p>
                        小琪越语网站成立2023年, 虽然我们很年轻, 但对于未来, 我们有无数种构想; 曾经那些看似遥不可及的可能; 现已被互联网的力量逐步实现。
                    </p>
                    <a href="" class="btn btn-light">查看更多</a>
                </div>
            </div>
        </div>
    </section>

    <section class="p-5 bg-dark text-light">
        <div class="container">
            <div class="row align-items-center justify-content-between">
                <div class="col-md p-5">
                    <h2>我们的优势</h2>
                    <p class="lead">
                        Lorem ipsum, dolor sit amet consectetur adipisicing
                        elit. Praesentium ea ratione corporis et provident.
                        Quia!
                    </p>
                    <p>
                        Lorem, ipsum dolor sit amet consectetur adipisicing
                        elit. Amet nostrum, aperiam assumenda vitae, beatae
                        at sint quaerat consequatur maxime, hic voluptatum
                        ex. Dolor minus perferendis magni autem
                        exercitationem quis quos.
                    </p>
                    <a href="" class="btn btn-light">查看更多</a>
                </div>

                <div class="col-md">
                    <img src="img/2.svg" alt="1" class="img-fluid" />
                </div>
            </div>
        </div>
    </section>

    <section class="p-5">
        <div class="container">
            <h2 class="text-center">常见问题</h2>
            <div class="accordion accordion-flush" id="accordionFlushExample">
                <div class="accordion-item">
                    <h2 class="accordion-header" id="flush-headingOne">
                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                            data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
                            问题 #1
                        </button>
                    </h2>
                    <div id="flush-collapseOne" class="accordion-collapse collapse show"
                        aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
                        <div class="accordion-body">
                            Placeholder content for this accordion, which is
                            intended to demonstrate the
                            <code>.accordion-flush</code> class. This is the
                            first item's accordion body.
                        </div>
                    </div>
                </div>
                <div class="accordion-item">
                    <h2 class="accordion-header" id="flush-headingTwo">
                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                            data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
                            问题 #2
                        </button>
                    </h2>
                    <div id="flush-collapseTwo" class="accordion-collapse collapse" aria-labelledby="flush-headingTwo"
                        data-bs-parent="#accordionFlushExample">
                        <div class="accordion-body">
                            Placeholder content for this accordion, which is
                            intended to demonstrate the
                            <code>.accordion-flush</code> class. This is the
                            second item's accordion body. Let's imagine this
                            being filled with some actual content.
                        </div>
                    </div>
                </div>
                <div class="accordion-item">
                    <h2 class="accordion-header" id="flush-headingThree">
                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                            data-bs-target="#flush-collapseThree" aria-expanded="false"
                            aria-controls="flush-collapseThree">
                            问题 #3
                        </button>
                    </h2>
                    <div id="flush-collapseThree" class="accordion-collapse collapse"
                        aria-labelledby="flush-headingThree" data-bs-parent="#accordionFlushExample">
                        <div class="accordion-body">
                            Placeholder content for this accordion, which is
                            intended to demonstrate the
                            <code>.accordion-flush</code> class. This is the
                            third item's accordion body. Nothing more
                            exciting happening here in terms of content, but
                            just filling up the space to make it look, at
                            least at first glance, a bit more representative
                            of how this would look in a real-world
                            application.
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="p-5 bg-primary">
        <div class="container">
            <h2 class="text-center text-light">网站贡献成员</h2>
            <p class="lead text-center text-white mb-5">
                Lorem ipsum, dolor sit amet consectetur adipisicing elit.
                Hic, unde?
            </p>
            <div class="row g-4">
                <div class="col-md-6 col-lg-3">
                    <div class="card bg-light">
                        <div class="card-body text-center">
                            <img src="img/01-man.jpeg" class="mb-3 rounded-circle" />
                            <h3 class="card-title">张三</h3>
                            <p class="card-text">
                                Lorem ipsum dolor sit amet consectetur
                                adipisicing elit. Accusamus, ratione!
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-lg-3">
                    <div class="card bg-light">
                        <div class="card-body text-center">
                            <img src="img/02-man.jpeg" class="mb-3 rounded-circle" />
                            <h3 class="card-title">张三</h3>
                            <p class="card-text">
                                Lorem ipsum dolor sit amet consectetur
                                adipisicing elit. Accusamus, ratione!
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-lg-3">
                    <div class="card bg-light">
                        <div class="card-body text-center">
                            <img src="img/03-man.jpeg" class="mb-3 rounded-circle" />
                            <h3 class="card-title">张三</h3>
                            <p class="card-text">
                                Lorem ipsum dolor sit amet consectetur
                                adipisicing elit. Accusamus, ratione!
                            </p>
                        </div>
                    </div>
                </div>
               
            </div>
        </div>
    </section>

    <section class="p-5">
        <div class="container">
            <h2 class="text-center mb-4">联系我们</h2>

            <ul class="list-group list-group-flush">
                <li class="list-group-item">地址：越南</li>
            </ul>
        </div>
    </section>

    <footer class="p-5 bg-dark text-white text-center">
        <div class="container">
            <p class="lead">Copyright &copy; 2023 小琪越语</p>
        </div>
    </footer>

    <script src="bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous"></script>
    <script>
        function btnFunc(str) {
            if (str == "reg") {
               // window.location.href = "login.html";
            }
        }

        $(document).ready(function () {
            if ($.cookie("hop_user_id") == null) {
                alert("请登录!");
                //window.location.href = "login.html";
                return;
            }

            

        });
    </script>
</body>

</html>